<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="site2.css">
    <title>bootstrap 4 网格系统的练习</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md">周一</div>
            <div class="col-md">周二</div>
            <div class="col-md">周三</div>
            <div class="col-md">周四</div>
            <div class="col-md">周五</div>
            <div class="col-md">周六</div>
            <div class="col-md">周日</div>
            
        </div>
        <div class="row">
            <div class="col-md">今天你 <mark>吃</mark> 了吗？</div>
            <div class="col-md"><code>span</code></div>
            <div>想起了<kbd>Enter</kbd>哈哈哈哈</div>

        </div>
        <div>有条纹的表格，条纹表格：striped 有条纹的</div>
        <table class="table table-striped">
            <thead>
                <tr>
                       <!-- tablerow 表格行 -->
                    <th>running</th>   
                    <th>reading</th>
                    <th>listening</th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <!-- tabledata表格数据 -->
                    <td>yes</td>  
                    <td>yes</td>
                    <td>yes</td>
                </tr>
                <tr>
                    <td>no</td>
                    <td>no</td>
                    <td>no</td>
                </tr>

            </tbody>

        </table>
        <div>有边框的表格：</div>
        <table class="table table-bordered">
            <thead>
                <tr>
                       <!-- tablerow 表格行 -->
                    <th>running</th>   
                    <th>reading</th>
                    <th>listening</th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <!-- tabledata表格数据 -->
                    <td>yes</td>  
                    <td>yes</td>
                    <td>yes</td>
                </tr>
                <tr>
                    <td>no</td>
                    <td>no</td>
                    <td>no</td>
                </tr>

            </tbody>

        </table>
        <div class="alert alert-success"> 你 <a href="#" class="alert-link">成功</a> 了耶！</div>
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss = "alert">&times;</button>
            你该休息了~

        </div>

        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>成功!</strong> 指定操作成功提示信息。
          </div>

        <div><input type="submit" class="btn btn-info" value="提交按钮"></div><br>
        <div class="btn-group btn-group-lg">
            <button class="btn btn-primary">按钮1</button>
            <button class="btn btn-primary">按钮2</button>
            <button class="btn btn-primary">按钮3</button>
        </div><br><br>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-primary">按钮1</button>
            <button class="btn btn-info">按钮2</button>
            <button class="btn btn-danger">按钮3</button>
        </div><br><br>
        <div>垂直按钮类  vertical adj.垂直的</div>
        <div class="btn btn-group btn-group-vertical">
            <button class="btn btn-primary">按钮primary</button>
            <button class="btn btn-info">按钮2</button>
            <button class="btn btn-danger">按钮3</button>
        </div>

        <h2>学习表单 form</h2>
    </div>
</body>
</html>